<template>
  <div class="income-box"> 
    <!-- 顶部面板 -->
    <!-- <div class="top-panels">
        <div class="panel-item">
            <div class="panel-item-title">月收入</div>
            <div class="panel-item-value">
                ￥4802.23
            </div>
        </div>
        <div class="panel-item">
            <div class="panel-item-title">已结算</div>
            <div class="panel-item-value">
                ￥4802.23
            </div>
        </div>
        <div class="panel-item">
            <div class="panel-item-title">未结算</div>
            <div class="panel-item-value">
                ￥4802.23
            </div>
        </div>
    </div> -->
    <div class="income-panel-box">
      <div class="income-item">  
        <div class="income-item-title">总分润</div>
        <div class="income-item-num">￥{{detail.totalProfit}}</div>
      </div>
      <div class="income-item">  
        <div class="income-item-title">日分润</div>
        <div class="income-item-num">￥{{detail.todayProfit}}</div>
      </div>
      <div class="income-item">  
        <div class="income-item-title">月分润</div>
        <div class="income-item-num">￥{{detail.monthProfit}}</div>
      </div>
      <div class="income-item">  
        <div class="income-item-title">已结算</div>
        <div class="income-item-num">￥{{detail.settled}}</div>
      </div>
      <div class="income-item">  
        <div class="income-item-title">未结算</div>
        <div class="income-item-num">￥{{detail.unsettled}}</div>
      </div>
    </div>
    

    <!-- 订单列表 -->
    <!-- <div class='t_box'  v-for="(item,index) in orderList" :key="index"  @click="goOrderDetail(item.id)"> 
        <div class="com_flex orderTitle">
        <div class='word1 '><span class="orderTetx">订单号：</span>{{item.orderSn}}</div> 
        <div class="statusBox type">{{item.orderStatusText=="已发货"?"配送中":item.orderStatusText}}</div>
        </div>
        
        <div class='w_box'>
        <div v-for="(goods,idx) in item.goodsList" :key="idx" v-show="idx<3" class="goodsList">
            <img class='pro_img' :src="goods.picUrl"  @click="goodIdx(index,idx)" />
            <div class="count">X{{goods.stock}}</div>
        </div>
        <div class='r_box' v-if="item.goodsList.length == 1"> 
            <div class='word1'><span class="goodsTitle ellipse goodsName">{{item.goodsList[0].goodsName}}</span></div> 
            <div class='word1'><span class="goodsTitle ellipse">{{item.orderTime}}</span></div> 
        </div> 
        </div> 
        <div class="actualPrice">      
        <span  class="group"> {{item.orderType==11?"外卖点餐":item.orderType==1?"店内堂食":"店内自提"}} </span>
        共{{item.goodsList.length}}件商品   实付款:<span class="moenytext">￥{{item.actualPrice}}</span>
        </div> 
    </div> -->

  </div>
</template>

<script>
import api from '@/api/api.js' 
export default {
  name: 'shopincome',
  components: { 
  },
  data () {
    return {
        // orderList:[
        //     {
        //         goodsList:[
        //             {
        //                 goodsId: 51,
        //                 goodsName: "螺蛳粉",
        //                 orderGoodsId: 78,
        //                 picUrl: "http://images.51zd.com.cn/upload/public/20210729/1627550019725-7b2d8130-5af9-46a3.jpg",
        //                 price: 24.8,
        //                 stock: 1,
        //             }
        //         ],
        //         actualPrice: 21.66,
        //         aftersaleStatus: 0,
        //         consignee: "",
        //         mobile: "",
        //         orderId: 69,
        //         orderSn: "TK241964030670016512",
        //         orderStatusText: "已取消",
        //         orderTime: "2021-10-29 16:38:40",
        //         orderType: 1,
        //     }
        // ]
        detail:{

        }
    }
  },
  mounted () {
    this.getData()
  },
  filters: {
     
  },
  
  methods: { 
    getData(){
      api.shopkeeper.profitStoreData({},res=>{
        this.detail = res.result
      })
    }
    
  }
}
</script> 
<style lang="less" scoped>
.income-box{
    background: #f7f7f7;
    padding: .28rem;
    min-height: 100vh;
}
.income-panel-box{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
} 
.income-item{
  width: 3.36rem;
  background: #fff;
  border-radius: .12rem;
  box-shadow: 0 0.06rem 0.20rem 0 rgba(143, 143, 143, 0.11);
  margin: .12rem 0;
  height: 3.16rem;
  padding: .28rem;
  &-title{
    font-weight: bold;
    font-size: .36rem;
    margin-bottom: .32rem;
  }
  &-num{
    color: #666;

  }
}


.top-panels{
    background: #fff;
    border-radius: .12rem;
    padding: .24rem;
    display: flex;
    margin-bottom: .24rem;
    .panel-item{
        flex: 1;
        text-align: center;
        line-height: .42rem;
        &-title{
            font-size: .32rem;
            font-weight: bold;
        }
        &-value{
            color: #666;
            margin-top: .16rem;

        }
    }
}
.w_box{
  width: 100%; 
  display: flex;
  padding: .28rem 0;

}
.pro_img{
  width: 1.40rem;
  height: 1.40rem;
  margin:0 0 0 .20rem;
  background: #ccc;
  display: block;
}
.w_box .r_box{
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.w_box .r_box .word1{
  font-size:.24rem;
  font-weight:400;
  color:rgba(102,102,102,1);
  margin-left: .28rem;
}
.repair{
  width: 1.65rem;
  height: .48rem;
  font-size:.24rem;
  font-weight:400;
  color:rgba(255,255,255,1); 
  border-radius: .30rem;
  text-align: center;
  line-height: .44rem; 
  margin-left: .15rem;
}
.t_box{
  position: relative;
  width: 7.10rem; 
  margin:.20rem auto;
  background: #ffffff;
  border-bottom:1px solid #F4F4F4; 
  overflow: hidden;
  border-radius: 0.16rem;
  box-shadow: 0 0.06rem 0.20rem 0 rgba(143, 143, 143, 0.11);
}  
.word1 text{
  color: #333;
}
.repair :active{
  opacity: 0.5;
}
.line12{
  height: .12rem;
}
.nopaddingtop{
  padding-top: 0 !important;
}
.status1{
  border: 0.02rem solid red;
  color: red;

}
.status2{ 
  border: 0.02rem solid #FFC300;
  color: #FFC300;
}
.status3{ 
  border: 0.02rem solid #90D300;
  color: #90D300;
} 
.status4{
  border: 0.02rem solid #ccc;
  color: #ccc;
}
.goodsName{
  font-size: 0.30rem;
  font-weight: bold; 
}
.goodsTitle{
  max-width: 5.00rem;
  display: block;
}
.buttonBox{
  border-top: 1px solid #f7f7f7;
  height: .90rem;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-right: 0.20rem;
}
.orderTitle{
    display: flex;
  justify-content: space-between;
  height: 0.78rem; 
  padding: 0.20rem;
  border-bottom: 1px solid #eee;
  box-sizing: border-box;
}
.statusBox{
  color: #FFC300;
  
}
.word1 .orderTetx{
  color: #999;
}
.goodsList{
  position: relative;
}
.count{
  position: absolute;
  font-size: .22rem;
  height: .30rem;
  bottom: 0;
  right: 0;
  background: rgba(0,0,0,.4);
  color: #fff;
  line-height: .30rem;
  padding: 0 0.06rem;
  border-radius: 0.04rem 0 0 0;
}
.actualPrice{
  text-align: right;
  color: #aaa;
  font-size: .24rem;
  padding-right: .30rem;
  padding-bottom: .20rem;
 
}

.group{
  border: 1px solid  #da7c1b;
  color: #da7c1b;
  float:left;
  margin-left: .20rem;
  padding: 0 .10rem
}

.actualPrice .moenytext{
  color: red;
  margin-left: .12rem;
}
.guige{
  display: flex;
  padding-left: .28rem;
}
.guige text{ 
  height: .36rem;
  font-size: .24rem;
  line-height: .36rem; 
  border-radius: .18rem;
  padding: 0 20rem;
  color: #fff;
}

.type1{
  color: red
}
.type2{
  color: #59C848;
}
.type3{
  color: #FFC300;
}
.type4{
  color: #ccc;
}
.commentAct{
  border: 1px solid #59C848;
}

</style>